<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="dist/css/quicktab.css">
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
        }

        textarea {
            display: block;
            border: 1px solid #e7e7e7;
            outline: none;
            flex-grow: 1;
        }
    </style>
</head>

<body>
    <button id="btn">添加测试tab</button>

    <div class="container">
        <div id="qtab"></div>
        <textarea id="log" cols="30" rows="10"></textarea>
    </div>
    <script src="dist/js/quicktab.js"></script>
    <script>

        const logTextarea = document.getElementById('log')
        const qtab = new Quicktab('#qtab', {
            id:'qtab',
            width: '50%',
            defaultTabs: [
                { url: 'welcome.html' },
                { url: 'welcome.html?page=1', title: '欢迎页面' },
            ],
            tab: {
                timeout: {
                    //为了测试超时事件,可以把时间设置成100毫秒
                    second: 100
                },
                //启用双击刷新
                doubleClickRefresh: true
            },

            onInit: function () {
                log(`事件名称:onInit`)
            },
            //tab被激活时触发
            onTabActivated: function (url) {
                log(`事件名称:onTabActivated----请求的url:${url}`)
            },
            onTabLoaded: function (url) {
                log(`事件名称:onTabLoaded----请求的url:${url}`)
            },
            onTabTimeout: function (url) {
                log(`事件名称:onTabTimeout----请求的url:${url}`)
            },
            onTabFinally: function (url) {
                log(`事件名称:onTabFinally----请求的url:${url}`)
            },
            onTabAll: function () {
                log(`事件名称:onTabAll`)
            },
            onTabLoadingTransitionend: function (url) {
                log(`事件名称:onTabLoadingTransitionend----请求的url:${url}`)
            },
            onTabClick: function (url) {
                log(`事件名称:onTabClick----请求的url:${url}`)
            },
            onTabDoubleClick: function (url) {
                log(`事件名称:onTabDoubleClick----请求的url:${url}`)
            },
            onTabClose: function (url) {
                log(`事件名称:onTabClose----请求的url:${url}`)
            },
        })

        let index = 4
        document.getElementById('btn').addEventListener('click', function () {
            qtab.addTab({
                url: 'welcome.html?page=' + index,
                title: '新选项卡' + index
            })
            index++
        })

        function log(newMessage) {
            // 在新日志项之前添加换行符
            const logEntry = `\n${newMessage}`;

            // 将新日志追加到 textarea
            logTextarea.value += logEntry;

            // 滚动 textarea 到底部，保持最新日志可见
            logTextarea.scrollTop = logTextarea.scrollHeight;
        }

    </script>
</body>

</html>
